.checkbox {
  display: flex;
  opacity: 0.8;
  padding: 5px;
  .animation();
  cursor: pointer;
  .label {
    font-size: 14px;
  }
  .icon {
    @size: 16px;
    @padding: 3px;
    .rel;
    width: @size;
    height: @size;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-sizing: content-box;
    border-radius: 4px;
    margin: auto 5px;
    &:before {
      .animation(.2s);
      content: "";
      display: block;
      .abs;
      margin: @padding;
      width: @size - @padding*2;
      height: @size - @padding*2;
      border-radius: 2px;
    }
  }
  &.checked {
    .icon {
      &:before {
        background-color: #00BFFF;
      }
    }
  }
  &.disable {
    opacity: 0.3 !important;
  }
  &.switch {
    flex-direction: row-reverse;
    @size: 20px;
    @padding: 2px;
    .label {
      margin: auto auto auto 5px;
    }
    .icon {
      width: @size*2;
      border-radius: @size;
      height: @size;
      &:before {
        margin: @padding;
        width: @size - @padding*2;
        height: @size - @padding*2;
        border-radius: @size;
        background-color: #ccc;
        left: 0;
      }
    }
    &.checked {
      .icon {
        &:before {
          left: @size;
          background-color: #00BFFF;
        }
      }
    }
  }
  &:hover {
    opacity: 1;
  }
}